<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>51包装</title>
    <!-- 导入bootstrap框架 -->
    <script src="https://how2j.cn/study/js/jquery/2.0.0/jquery.min.js"></script>
    <link href="https://how2j.cn/study/css/bootstrap/3.3.6/bootstrap.min.css" rel="stylesheet">
    <script src="https://how2j.cn/study/js/bootstrap/3.3.6/bootstrap.min.js"></script>
    <!-- 导入css文件 -->
    <link rel="stylesheet" href="./表单页面.css">
</head>

<body>
    <div id="top">
        <div class="topInfo">
            <span>咨询电话 : 010-59478634</span>
            <div class="logIN">
                <span>登陆</span>
                <span>注册</span>
            </div>
        </div>
        <div class="topNavBox">
            <div class="topNav">
                <ul>
                    <li>首页</li>
                    <li>在线定制</li>
                    <li>标准箱</li>
                    <li>品质保障</li>
                </ul>
            </div>
            <div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
                <div class="panel panel-default">
                  <div class="panel-heading" role="tab" id="headingOne">
                    <h4 class="panel-title">
                      <a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
                        <img src="../桌游精灵/imgs/菜单.png" >
                      </a>
                    </h4>
                  </div>
                  <div id="collapseOne" class="panel-collapse collapse in" role="tabpanel" aria-labelledby="headingOne">
                    <div class="panel-body">
                      <ul>
                          <li>首页</li>
                          <li>在线定制</li>
                          <li>标准箱</li>
                          <li>品质保障</li>
                      </ul>
                    </div>
                  </div>
                </div>
              </div>
        </div>    
    </div>
    

    <div id="middle">
        <div class="middleNav">
            <div class="box">  
                <div class="line">1</div>
                <div class="circle"></div>
                <div class="menu">1.定制纸箱</div>
            </div>

            <div class="box">
                <div class="line">2</div>
                <div class="circle"></div>
                <div class="menu">2.选择数量</div>
            </div>

            <div class="box">
                <div class="line">3</div>
                <div class="circle"></div>
                <div class="menu">3.上传附件</div> 
            </div>

            <div class="box">
                <div class="line">4</div>
                <div class="circle"></div>
                <div class="menu">4.确认下单</div>
            </div>
        </div>
        <div class="main">
            <h3>请您按照以下步骤来定制您的纸箱</h3>
            <div class="table"> 
                <div class="boxType">
                    <img src="./imgs/logo-1.png" alt="">
                    <span>选择箱型</span>
                </div>
                <div class="mainTop">
                    <form>
                        <div class="box">
                            <input type="radio"  name="step" id="button-1" checked>
                            <label for="button-1"></label>
                            <span>&#12288;对口箱&#12288;</span>
                        </div>
                        <div class="box">
                            <input type="radio" name="step" id="button-2">
                            <label for="button-2"></label>
                            <span>&#12288;飞机盒&#12288;</span>
                        </div>
                        <div class="box">
                            <input type="radio" name="step" id="button-3">
                            <label for="button-3"></label>
                            <span>&#12288;天地盖&#12288;</span>
                        </div>
                    </form>
                    <select>
                        <option>
                            查看详情
                        </option>
                        <option value="1">查看详情</option>
                        <option value="2">查看详情</option>
                        <option value="3">查看详情</option>
                        <option value="4">查看详情</option>
                    </select>
                </div>

                <div class="boxType">
                    <img src="./imgs/logo-2.png" alt="">
                    <span>确定尺寸</span>
                </div>

                <div class="mainMiddle">
                    <div class="size">
                        <!-- name将其划分为一组，name相同实现单选 -->
                        <!-- for属性 规定与label里的哪个元素绑定  对应input里的 id 属性 -->
                        <!-- value 属性为 input 元素设定值。也就是预先显示的文本 -->
                        <div class="size-1">
                            <input type="radio"  id="step-4" name="size" value="button-1" checked>
                            <label for="step-4"></label>
                            <span>&#12288;外径 &#12288;</span>
                            <div class="size-select">
                                长&#8194;<input class="size" type="text" name="length">&nbsp;mm
                            </div>
                            <div class="size-select">
                                宽&#8194;<input class="size" type="text" name="width">&nbsp;mm
                            </div>
                            <div class="size-select">
                                高&#8194;<input class="size" type="text" name="height">&nbsp;mm
                            </div>
                        </div>
                        <div class="size-2">
                            <input type="radio" class="rdo" id="step-5" name="size" value="button-1">
                            <label for="step-5"></label>
                            <span>&#12288;内径 &#12288;</span>
                            <div class="size-select">
                                长&#8194;<input class="size" type="text" name="length">&nbsp;mm
                            </div>
                            <div class="size-select">
                                宽&#8194;<input class="size" type="text" name="width">&nbsp;mm
                            </div>
                            <div class="size-select">
                                高&#8194;<input class="size" type="text" name="height">&nbsp;mm
                            </div>
                        </div>
                    </div>
                    <select>
                        <option>
                            查看详情
                        </option>
                        <option value="1">查看详情</option>
                        <option value="2">查看详情</option>
                        <option value="3">查看详情</option>
                        <option value="4">查看详情</option>
                    </select>
                </div>

                <div class="boxType">
                    <img src="./imgs/logo-3.png" alt="">
                    <span>选择材质</span>
                </div>
                <div class="mainBottom">
                    <div class="mainBox">
                        <div class="box2">
                            <input type="radio"  name="species" id="button-4" checked>
                            <label for="button-4"></label>
                            <span>三层A瓦优质&nbsp;&nbsp;</span>
                        </div>
                        <div class="box2">
                            <input type="radio" name="species" id="button-5">
                            <label for="button-5"></label>
                            <span>三层A瓦优质&nbsp;&nbsp;</span>
                        </div>
                        <div class="box2">
                            <input type="radio" name="species" id="button-6">
                            <label for="button-6"></label>
                            <span>三层A瓦优质&nbsp;&nbsp;</span>
                        </div>
                        <div class="box2">
                            <input type="radio" name="species" id="button-7">
                            <label for="button-7"></label>
                            <span>三层A瓦优质&nbsp;&nbsp;</span>
                        </div>
                        <div class="box2">
                            <input type="radio" name="species" id="button-8">
                            <label for="button-8"></label>
                            <span>三层A瓦优质&nbsp;&nbsp;</span>
                        </div>
                    </div>
                    <select>
                        <option>
                            查看详情
                        </option>
                        <option value="1">查看详情</option>
                        <option value="2">查看详情</option>
                        <option value="3">查看详情</option>
                        <option value="4">查看详情</option>
                    </select>
                </div>
            </div> 
        </div>
        <div class="nextBox">
            <div class="btn"><button class="nextStep">下一步</button></div>
        </div>  
    </div>
        <div id="bottom">
            <div class="bottomRow">
                <div class="job">51包装网——纸箱包装首选平台</div>
                <div class="about">
                    <div class="aboutTop">
                        <a href="#">关于我们</a>
                        <a href="#">配送流程</a>
                        <a href="#">联系我们</a>
                    </div>
                    <div class="aboutBottom">
                        <a href="#">下单指南</a>
                        <a href="#">媒体介绍</a>
                    </div>
                </div>
                <div class="tel">
                    <ul>
                        <li>TEL:400-0000-000</li>
                        <li>企业QQ：123456789</li>
                        <li>微信号:XXXXXXXX</li>
                    </ul>
                    <img src="./imgs/qrcode.jpg" alt="">
                </div>
            </div>
        </div>

        <footer>北京五一包装科技有限公司Copyright ©2015 &#8195 51baozhuang.com015 &#8195 All rights reserved. 京icp备99999999-1
        </footer>
</body>

</html>